<!DOCTYPE html>
<html>
  <head>
  
    <title>
      支付页面
    </title>
    
    <link href="/tcpay/vendor/bootstrap-4.4.1-dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="/tcpay/vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
    <link href="/tcpay/css/theme.css" rel="stylesheet">
    <link rel="stylesheet" href="/alipay_tf/layer(1).css" id="layuicss-layer">
    <meta name="viewport"content="width=device-width, initial-scale=1">
    
  </head>
  <body>
<div class="container-fluid bg-dark text-light text-center display-4 embed-responsive">
  <i class="fab fa-amazon-pay">
  </i>
  收银台
</div>
<div class="text-md-center text-white w-100">
  聚合支付
</div>
<div id="main_cc" class="container">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
      </div>
      <div class="col-md-4">
        <div class="alert alert-warning" role="alert">
          订单编号：${payOrderId!}
        </div>
      </div>
      <div class="col-md-4">
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-md-4">
      </div>
      <div class="col-md-4">
        <div class="alert alert-warning" role="alert">
          订单金额：<span style="color:red;font-size:1.2em"> ${amount!} </span>元
        </div>
      </div>
      <div class="col-md-4">
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-md-4">
      </div>
      <div class="col-md-4">
        <div class="alert alert-danger" role="alert">
          付款剩余时间：<span id="countdown" class="warning" style="color:red;font-size:1.2em">_</span>
        </div>
      </div>
      <div class="col-md-4">
      </div>
    </div>
  </div>
  <div class="container text-lg-center">
    <div class="row text-lg-center">
      <div class="col-md-4">
      </div>
      <div class="col-md-4 col-12 bg-light border-secondary rounded shadow text-center">
        <b class="text-md-center text-info align-middle h6 font-weight-bold text-center">
          请打开支付宝扫码
        </b>
        <form class="m-md-3 text-center">
          <img src="${codeImgUrl!}" width="200" height="200">
        </form>
      </div>
      <div class="col-md-4">
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-md-4">
      </div>
      <div class="col-md-4">
        <div class="alert alert-danger text-center" role="alert" style="font-weight:bold;">
              请勿超时支付!
              请勿重复支付!
              <br>按照订单金额： ${amount!}元支付!</br>
              不按要求支付，您的资金可能无法找回!
        </div>
      </div>
      <div class="col-md-4">
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-md-4">
      </div>
      <div class="col-md-4">
      </div>
      <div class="col-md-4">
      </div>
    </div>
  </div>
</div>

    
<script src="/alipay_tf/jquery.min.js"></script>
<script src="/alipay_tf/clipboard.min.js"></script>
<script src="/alipay_tf/layer.js"></script>
<script src="/alipay_tf/jquery.qrcode.min.js"></script>
<script src="/tcpay/reconnecting-websocket.js"></script>
<script type="text/javascript">
    function getDeviceType() {
        if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {  //判断iPhone|iPad|iPod|iOS
            sid = 'ios';
        } else if (/(Android)/i.test(navigator.userAgent)) {   //判断Android
            sid = 'andorid';
        } else {  //pc
            sid = 'pc';
        };
        return sid;
    }

    //带天数的倒计时
    var timer = null;
    var times = ${expireTime};
    countDown = function () {
      timer = setInterval(function () {
        if (times <= 0) {
          clearInterval(timer);
          $("#main_cc").html("<div style='text-align: center;'><span style='font-size:30px; color:red; text-align:center;'>支付超时，请重新下单</span></div>");
        }
        else {
          var day = 0,
                  hour = 0,
                  minute = 0,
                  second = 0;//时间默认值
          if (times > 0) {
            day = Math.floor(times / (60 * 60 * 24));
            hour = Math.floor(times / (60 * 60)) - (day * 24);
            minute = Math.floor(times / 60) - (day * 24 * 60) - (hour * 60);
            second = Math.floor(times) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
          }
          if (day <= 0) day = ''; else day = day + '天';
          if (hour <= 0) hour = ''; else hour = hour + '时';
          if (minute <= 0) minute = ''; else minute = minute + '分';
          $("#countdown").text(day + hour + minute + second + '秒');
          if (Math.ceil(times) % 3 == 0) {
            $.ajax({
              type: "POST",
              async: true,
              url: "/api/tcpay/query",
              contentType: "application/x-www-form-urlencoded;charset=utf-8",
              data: {
                payOrderId : "${payOrderId!}"
              },
              success: function (rdata) {
                data = JSON.parse(rdata);
                if (data.status == '3' || data.status == '2') {
                  if (!data.url)
                    $("#main_cc").html("<div style='text-align: center;'><span style='font-size:30px; color:green; text-align:center；'>支付成功</span></div>");
                  else
                    window.location.href = data.url;
                } else {
                  console.log(rdata);
                }
              }
            });
          }
        }
        times--;
      }, 1000);
    }();

    var amount = "${amount!}";
    var skBank = "${skBank!}";
    var skName = "${skName!}";
    var skCard = "${skCard!}";
	var payOrderId = "${payOrderId!}";
    var radomRemark = "${radomRemark!}";


    $(function () {
        //复制金额
        var clp1 = new ClipboardJS('#copymoney');
        clp1.on('success', function (e) {
            e.clearSelection();
            layer.msg('<div style="font-size:18px;color:#fff;">金额【<span style="color: red;">' + amount + '</span>】复制成功！<br/>粘贴到打款金额！</div>', {time: 2000});
        });
        clp1.on('error', function (e) {
            layer.msg('请手动点击“复制金额”进行复制！');
        });

        //复制收款银行
        var copySkBank = new ClipboardJS('#copySkBank');
        copySkBank.on('success', function (e) {
            e.clearSelection();
            layer.msg('<div style="font-size:18px;color:#fff;">收款银行【<span style="color: red;">' + skBank + '</span>】复制成功！<br/></div>', {time: 2000});
        });
        copySkBank.on('error', function (e) {
            layer.msg('请手动点击“复制收款银行”进行复制！');
        });

        //复制收款人姓名
        var copySkName = new ClipboardJS('#copySkName');
        copySkName.on('success', function (e) {
            e.clearSelection();
            layer.msg('<div style="font-size:18px;color:#fff;">收款姓名【<span style="color: red;">' + skName + '</span>】复制成功！<br/></div>', {time: 2000});
        });
        copySkName.on('error', function (e) {
            layer.msg('请手动点击“复制收款姓名”进行复制！');
        });

        //复制收款人账号
        var copySkCard = new ClipboardJS('#copySkCard');
        copySkCard.on('success', function (e) {
            e.clearSelection();
            layer.msg('<div style="font-size:18px;color:#fff;">收款卡号【<span style="color: red;">' + skCard + '</span>】复制成功！<br/></div>', {time: 2000});
        });
        copySkCard.on('error', function (e) {
            layer.msg('请手动点击“收款卡号”进行复制！');
        });

        //复制附言参数
        var copyRadomRemark = new ClipboardJS('#copyRadomRemark');
        copyRadomRemark.on('success', function (e) {
            e.clearSelection();
            layer.msg('<div style="font-size:18px;color:#fff;">附言【<span style="color: red;">' + radomRemark + '</span>】复制成功！<br/></div>', {time: 2000});
        });
        copyRadomRemark.on('error', function (e) {
            layer.msg('请手动点击“复制附言”进行复制！');
        });

        if (getDeviceType() == "pc") {
            $("#mobile").hide();
            $("#pc").show();
            var url = window.location.href;
            $('#qrcode').qrcode(url);
            $('#qrcode canvas').width("300px").height("300px");
        } else {
            $("#pc").hide();
            $("#mobile").show();
        }
    })

</script>

</body>
</html>